<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" checked="false" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    var data = [
      {
        id: 0,
        title: "残酷月光 - 费启鸣",
        checked: true,
        collect: true
      }, {
        id: 1,
        title: "兄弟 - 艾热",
        checked: false,
        collect: false
      }, {
        id: 2,
        title: "毕生 - 夏增祥",
        checked: false,
        collect: true
      }, {
        id: 3,
        title: "公子向北去 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 4,
        title: "战场 - 沙漠五子",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];


    let ul = document.querySelector('#list')
   
    // 1. 动态渲染
    let render = data => {
      ul.innerHTML = ''
      data.forEach((item, ind) => {
        let li = document.createElement('li')
        li.innerHTML = `<input type="checkbox" ${item.checked ? 'checked' : ''} />
        <span>${item.title} </span>
        ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'} 
        <a href="javascript:;" class="remove">删除</a>`
        ul.appendChild(li)
      })

      // 点击删除
      let remove = document.querySelectorAll('.remove')
      remove.forEach((item, ind) => {
        let index = ind
        item.addEventListener('click', () => {
          console.log(1);
          data.splice(index, 1)
          render(data)
        })
      })


      // 3. 关联收藏与复选框

      // 点击收藏 改变单选框的状态
      let collect = document.querySelectorAll('.collect')
      let inps = document.querySelectorAll('li  input')
      collect.forEach((item, ind) => {
        let index = ind
        item.addEventListener('click', () => {
          inps[index].checked = true
        })
      })

      let cancelCollect = document.querySelectorAll('.cancelCollect')
      cancelCollect.forEach((item, ind) => {
        let index = ind
        item.addEventListener('click', () => {
          inps[index].checked = false
        })
      })
    }
    // 初始化数据
    render(data)


    // 2. 动态添加数据
    let addA = document.querySelector('.footer #add')
    let inptxt = document.querySelector('.footer #newInfo')
    addA.addEventListener('click', () => {
      data.push({ id: data.length, title: `${inptxt.value}`, checked: true, collect: false })
      render(data)
      inptxt.value = ''
    })

    // 全选全不选
    let checkAll = document.querySelector('.footer #checkAll')
    checkAll.onclick = function(){
      document.querySelectorAll('li  input').forEach(item=> item.checked = !item.checked)
    }




    // 4.删除按钮 点击删除所有已选项
    let remove = document.querySelector('.footer #remove')
    remove.onclick = function(){
      data = data.filter(item => item.checked === false)
      render(data)
    }










  </script>
</body>

</html>